웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 반복문을 사용할 수 있는 v-for디렉티브를 알아보겠습니다.
v-for는 템플릿에 사용하며 여러 개의 값을 가진 데이터를 루프를 사용하여 한 번에 출력할 수 있는 유용한 방법입니다. 이때 사용 방법은 아래와 같습니다.
v-for="item in Items"
여기서 Items난 VueJS에 설정된 데이터 값입니다. 그렇다면 간단한 예제를 사용하여 알아봅니다.
# vuejs v-for 예제보기
아래는 사이트 정보를 가진 data인 변수 MyItems에서 v-for를 사용해 모든 name값을 출력해보려고합니다. 이를 위해서 아래와 같이 코드를 작성합니다.<ul>
<li v-for="item in MyItems">{{ item.name }}</li>
</ul>
<li v-for="item in MyItems">{{ item.name }}</li>
</ul>
MyItems이 루프를 돌면서 item으로 하나의 아이템 정보를 가져올 수 있고 item 객체의 name을 표현식을 사용하여 {{ item.name }}으로 출력하였습니다. 이때 data가 가진 값은 아래처럼 data에 설정되어 있습니다.
new Vue({
el: '#myApp',
data: {
MyItems: [
{ id: 1, name: 'web' },
{ id: 2, name: 'is' },
{ id: 3, name: 'free' }
]
}
})
el: '#myApp',
data: {
MyItems: [
{ id: 1, name: 'web' },
{ id: 2, name: 'is' },
{ id: 3, name: 'free' }
]
}
})
위 코드를 실행하면 아래처럼 나타날 것입니다.
• web
• is
• free
이처럼 간단하게 루프를 돌며 출력할 수 있습니다.
! 아이템의 순서, index를 보여주려면?
만약 아이템의 순서인 인덱스(index) 숫자가 필요한 경우? 이때는 아래처럼 v-for에 index를 추가하면 쉽게 사용할 수 있습니다.<li v-for="(item, index) in MyItems">{{ index + ' : ' + item.name }}</li>
index를 추가하고 또 소괄호를 사용한 점이 차이점입니다.
@ 인덱스를 사용하여 원하는 순서의 아이템에만 클래스 추가하는 방법
이 방법으로 첫 번째 또는 원하는 위치의 클래스만 추가할 수 있습니다. 예를들어 첫 번째만 active라는 클래스를 추가한다면 아래와 같이 코드를 작성합니다.
<li v-for="(item, index) in MyItems" :class="{ 'active': index == 1 }">{{ index + ' : ' + item.name }}</li>
위에 보시면 v-for가 사용된 엘리먼트에 아래와 같이 :class 속성이 추가되었습니다.
:class="{ 'active': index == 0 }"
// index가 1인 경우 'active' 클래스 추가
// index가 1인 경우 'active' 클래스 추가
이처럼 원하는 위치에만 클래스를 쉽게 추가 할 수 있습니다. index == 1로 수정하면 당연히 두 번째 엘리먼트에 'active'가 추가됩니다.
! :key 속성 사용하기
v-for 반복문 사용시 :key를 사용할 수 있습니다. 이때 키 속성의 값으로는 for 루프의 값 중 하나를 설정하는데 아래와 같은 모습을 가지게됩니다.<ul>
<li v-for="item in myItems" :key="number">
{{ item.number }}
{{ item.name }}
</li>
</ul>
<li v-for="item in myItems" :key="number">
{{ item.number }}
{{ item.name }}
</li>
</ul>
여기서 key를 설정하지 않아도 View에서는 아무런 차이가 없습니다. 다만 key 설정은 권장되는 방법으로 설정시 VirtualDOM에서 해당 값에 대하여 루프의 인덱스 기준을 대신하여 동작하므로 성능 측면에서 더 우수하다고 합니다. 이때 설정될 값은 루프에서 변경되거나 업데이트 될 값이 키로 설정되어야합니다.
아래의 글도 찾고 계시지 않나요?
